<template>
  <el-form :model="ruleForm" :rules="rules" ref="formName" class="demo-ruleForm1">
      <el-row>
          <el-col>
              <el-form-item label="物品类型">
                  <el-radio-group v-model="ruleForm.radio" style="float:left">
                      <el-radio-button label="文件合同"></el-radio-button>
                      <el-radio-button label="美食"></el-radio-button>
                      <el-radio-button label="证件" ></el-radio-button>
                      <el-radio-button label="鲜花" ></el-radio-button>
                      <el-radio-button label="手机" ></el-radio-button>
                      <el-radio-button label="钥匙" ></el-radio-button>
                      <el-radio-button label="水果生鲜" ></el-radio-button>
                      <el-radio-button label="服饰首饰" ></el-radio-button>
                      <el-radio-button label="珠宝" ></el-radio-button>
                      <el-radio-button label="烟酒" ></el-radio-button>
                      <el-radio-button label="其他" ></el-radio-button>
                  </el-radio-group>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="12">
              <span style="line-height: 40px">物品拍照上传</span>
              <template>
                  <el-alert
                          title="温馨提示：点击即可修改图片，只允许上传.jpg或.png格式   **非必选**"
                          type="warning"
                          :closable="false">
                  </el-alert>
              </template>
              <!--不使用action 符号#   用http-request实现自定义上传  :http-request="httpRequest"  :on-change="handleChange"-->
              <el-upload
                      class="avatar-uploader"
                      action="lei"
                      :on-change="handleChange"
                      :show-file-list="false"
                      :http-request="httpRequest"><!--覆盖默认上传-->
                  <el-image v-if="ruleForm.tempUrl" :src="ruleForm.tempUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="发货地址">
                  <el-input placeholder="请输入地址" clear="clearable" v-model="ruleForm.address" style="width:870px">
                      <el-button slot="append" icon="el-icon-map-location" @click="getDialog()"></el-button>
                  </el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-dialog :visible.sync="dialogVisible" title="地图">
          <AMap @updateLocation="getAddress"/>
          <el-button @click="FaDialog()">选择该地址</el-button>
      </el-dialog>
      <el-row>
          <el-col>
              <el-form-item label="备注地址" prop="address1">
                  <el-input placeholder="请填写楼号及门牌号" clear="clearable" v-model="ruleForm.newaddress" style="width:870px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="联系方式" prop="phone">
                  <el-input placeholder="请填写电话号码" clear="clearable" v-model="ruleForm.phone" style="width:860px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="收货地址" prop="address2">
                  <el-input placeholder="请输入收货地址" clear="clearable" v-model="ruleForm.address1" style="width:870px">
                      <el-button slot="append" icon="el-icon-map-location" @click="getDialog1()"></el-button>
                  </el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-dialog :visible.sync="dialogVisible1" title="地图">
          <AMap @updateLocation="getnewAddress"/>
          <el-button @click="FaDialog()">选择该地址</el-button>
      </el-dialog>
      <el-row>
          <el-col>
              <el-form-item label="备注地址" prop="address3">
                  <el-input placeholder="请填写楼号及门牌号" clear="clearable" v-model="ruleForm.newaddress1" style="width:870px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="收货电话" prop="phone1">
                  <el-input placeholder="请填写电话号码" clear="clearable" v-model="ruleForm.phone1" style="width:860px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col>
              <el-form-item label="备注留言" prop="text">
                  <el-input
                      type="textarea"
                      :rows="4"
                      placeholder="请填写物品具体信息"
                      v-model="ruleForm.textarea"
                      style="width:870px">
                  </el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row>
          <el-col :span="14">
              <el-form-item label="物品保价" prop="value">
                  <el-select v-model="ruleForm.value" placeholder="请选择" style="float:left;width:500px">
                      <el-option
                          v-for="item in ruleForm.options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                  </el-select>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="" prop="money" label-width="0px">
                  <el-input v-model="ruleForm.money" placeholder="请输入跑腿费" style="width:370px"></el-input>
              </el-form-item>
          </el-col>
      </el-row>
      <el-row type="flex" justify="center" style="text-align:center">
          <el-col :span="8">
              <el-form-item style="display:inline-block">
                  <el-button type="success" @click="Submit('ruleForm')">发布</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
          </el-col>
      </el-row>
  </el-form>
</template>
<script>
import AMap from '../components/AMap.vue';
import axios from 'axios';
export default {
  name:"DeliverApp",
  components:{
     AMap,
  },
  data(){
      return{
          dialogVisible:false,
          dialogVisible1:false,
          labelPosition:'left',
          ruleForm:{
              radio:'文件合同',
              address:'',
              newaddress:'',
              phone:'',
              address1:'',
              newaddress1:'',
              phone1:'',
              textarea:'',
              money:'',
              imageUrl: '',
              tempUrl: '',
              imgs:'',
              options:[
                  {
                      value:"选项1",
                      label:'不保价'
                  },
                  {
                      value:"选项2",
                      label:'保价'
                  }
              ],
              value:'不保价',
          },
          fileList:[],
          rules:{
                  radio:[
                      {required:true,message:'请至少选择一个类型',trigger:'change'}
                  ],
                  Address:[
                      {required:true,message:"请填写发货地址",trigger:'blur'}
                  ],
                  newAddress:[
                      {required:true,message:"请填写具体发货地址",trigger:'blur'}
                  ],
                  phone:[
                      {required:true,message:"请填写联系方式",trigger:'blur'}
                  ],
                  Address1:[
                      {required:true,message:"请填写收货地址",trigger:'blur'}
                  ],
                  newAddress1:[
                      {required:true,message:"请填写具体收货地址",trigger:'blur'}
                  ],
                  phone1:[
                      {required:true,message:"请填写收货电话",trigger:'blur'}
                  ],
          },
          formdata:{},
      }
  },
  methods:{
      getAddress(dataForm){
          console.log(dataForm)
          this.ruleForm.address = dataForm.orgAddr;
          console.log(this.ruleForm.address);
      },
      getnewAddress(dataForm){
          console.log(dataForm)
          this.ruleForm.address1 = dataForm.orgAddr;
          console.log(this.ruleForm.address1);
      },
      getDialog(){
          this.dialogVisible=true;
      },
      getDialog1(){
          this.dialogVisible1=true;
      },
      FaDialog(){
          this.dialogVisible=false;
          this.dialogVisible1=false;
      },
      Submit(){
          this.formdata = {radio:this.ruleForm.radio,Address:this.ruleForm.address,newaddress:this.ruleForm.newaddress,phone:this.ruleForm.phone,address1:this.ruleForm.address1,newaddress1:this.ruleForm.newaddress1,phone1:this.ruleForm.phone1,textarea:this.ruleForm.textarea,value:this.ruleForm.value,money:this.ruleForm.money,img:this.ruleForm.tempUrl}
          this.$refs.formName.validate(valid=>{
                  if(valid){
                      this.$toast.success("发布成功", {
                          position: "top-center",
                          timeout: 5000,
                          closeOnClick: true,
                          pauseOnFocusLoss: true,
                          pauseOnHover: true,
                          draggable: true,
                          draggablePercent: 0.6,
                          showCloseButtonOnHover: false,
                          hideProgressBar: true,
                          closeButton: "button",
                          icon: true,
                          rtl: false
                      });
                      axios.post('http://localhost:3000/deliver',this.formdata)
                      .then(response=>{
                          console.log(response);
                      })
                      .catch(error=>{
                          console.log(error);
                      })
                  }
                  else{
                      this.$toast.error("error", {
                          position: "top-center",
                          timeout: 5000,
                          closeOnClick: true,
                          pauseOnFocusLoss: true,
                          pauseOnHover: true,
                          draggable: true,
                          draggablePercent: 0.6,
                          showCloseButtonOnHover: false,
                          hideProgressBar: true,
                          closeButton: "button",
                          icon: true,
                          rtl: false
                      });
                  }    
              })
      },
      resetForm(){
              this.$refs.formName.resetFields();
      },
      //将上传图片的原路径赋值给临时路径
      handleChange(event) {
          this.ruleForm.tempUrl = URL.createObjectURL(event.raw);
          console.log(this.ruleForm.tempUrl)
      },
      //实现图片上传功能
      httpRequest(item) {
          //验证图片格式大小信息
          console.log(item.file)
          const isJPG = item.file.type == 'image/jpeg' || item.file.type == 'image/png';
          const isLt2M = item.file.size / 1024 / 1024 < 2;
          if (!isJPG) {
              this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
          }
          if (!isLt2M) {
              this.$message.error('上传图片大小不能超过 2MB!');
          }
          //图片格式大小信息没问题 执行上传图片的方法
          if (isJPG && isLt2M == true) {
              let fd = new FormData()
              fd.append('file',item.file.raw)
              console.log(fd);
          }
      },
  },
}
</script>
<style lang="scss">
.demo-ruleForm1{
    margin-top: -20px;
    background-color: rgba(234, 239, 187,0.3); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.1); 
    width: 950px;
    height: 1050px;
    position:relative;
    left:-300px;
}
.el-form-item{
  display: flex;
  flex-direction: row;
}
.avatar-uploader {
      margin-top: 20px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      width: 178px;
      height: 178px;
  }

  .avatar-uploader:hover {
      border-color: #409EFF;
  }

  .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
  }

  .avatar {
      width: 178px;
      height: 178px;
      display: flex;
  }


</style>